<template>
  <div>
    <van-popup
      v-model="isShowFont"
      position="bottom"
      :close-on-click-overlay="false"
      @click-overlay="cancel"
      :overlay="false"
      :duration="duration"
    >
      <div class="top">
        <div class="sure" @click="confirm">完成</div>
      </div>
      <div class="font-title">文本格式</div>
      <div class="fontTypes">
        <div
          class="type"
          v-for="(item, index) in fontTypes"
          :key="index"
          @click="checkType(item)"
        >
          <div :class="['icon', { 'check-icon': item.check }]">
            <img :src="item.icon" alt="" />
          </div>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
      <div class="fontTypes">
        <div
          class="type"
          v-for="(item, index) in textTypes"
          :key="index"
          @click="checkType(item)"
        >
          <div :class="['icon', { 'check-icon': item.check }]">
            <img :src="item.icon" alt="" />
          </div>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: {
    isShowFont: {
      type: Boolean,
    },
    duration: {
      type: Number,
    },
  },
  data() {
    return {
      fontTypes: [
        {
          icon: require("@/assets/img/weight.png"),
          name: "加粗",
          text: "bold",
          check: false,
        },
        {
          icon: require("@/assets/img/I.png"),
          name: "倾斜",
          text: "italic",
          check: false,
        },
        {
          icon: require("@/assets/img/font-u.png"),
          name: "下划线",
          text: "underline",
          check: false,
        },
        {
          icon: require("@/assets/img/reference.png"),
          name: "引用",
          text: "mceBlockQuote",
          check: false,
        },
      ],
      textTypes: [
        {
          icon: require("@/assets/img/orderly.png"),
          name: "有序列表",
          text: "InsertOrderedList",
          check: false,
        },
        {
          icon: require("@/assets/img/disorderly.png"),
          name: "无序列表",
          text: "InsertUnorderedList",
          check: false,
        },
        {
          icon: require("@/assets/img/justify.png"),
          name: "两端对齐",
          text: "JustifyFull",
          check: false,
        },
        {
          icon: require("@/assets/img/text-left.png"),
          name: "左对齐",
          text: "JustifyLeft",
          check: false,
        },
        {
          icon: require("@/assets/img/center.png"),
          name: "居中",
          text: "JustifyCenter",
          check: false,
        },
        {
          icon: require("@/assets/img/text-right.png"),
          name: "右对齐",
          text: "JustifyRight",
          check: false,
        },
      ],
    };
  },
  methods: {
    confirm() {
      this.$emit("cancel", false);
    },
    cancel() {
      this.$emit("cancel", false);
    },
    checkType(item) {
      if (
        item.text == "InsertOrderedList" ||
        item.text == "InsertUnorderedList"
      ) {
      } else if (
        item.text == "JustifyFull" ||
        item.text == "JustifyLeft" ||
        item.text == "JustifyCenter" ||
        item.text == "JustifyRight"
      ) {
        this.textTypes.forEach((e, i) => {
          if (i >= 2) {
            if (item.text === e.text) {
              e.check = true;
            } else {
              e.check = false;
            }
          }
        });
      } else {
        item.check = !item.check;
      }
      this.$emit("confirm", item.text);
    },
    //双回车取消引用
    cancelBlockquote(bool) {
      if (bool) {
        this.fontTypes[3].check = true;
      } else {
        this.fontTypes[3].check = false;
      }
    },
    cancelLi(index) {
      this.textTypes[index].check = false;
      if (index) {
        this.textTypes[0].check = true;
      } else {
        this.textTypes[1].check = true;
      }
    },
    //双回车取消列表
    cancelUlOl() {
      this.textTypes[0].check = false;
      this.textTypes[1].check = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.fontTypes {
  padding: 0 32px;
  display: flex;
  overflow-x: scroll;
  &:last-child {
    margin-bottom: 30px;
  }
  .type {
    margin-bottom: 28px;
    margin-right: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &:last-child {
      margin-right: 0;
    }
    .icon {
      width: 88px;
      height: 88px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
      img {
        width: 32px;
        height: 32px;
      }
    }
    .check-icon {
      background-color: #f5f5f5;
    }
    .name {
      font-size: 20px;
      font-weight: 400;
      color: #666666;
      line-height: 23px;
    }
  }
}
.top {
  padding: 20px 32px;
  line-height: 33px;
  font-weight: 400;
  font-size: 24px;
  display: flex;
  justify-content: flex-end;
  color: #f27e31;
  align-items: center;
  border-bottom: 2px solid #f6f6f6;
  border-top: 2px solid #f6f6f6;
}
.font-title {
  padding: 32px;
  font-size: 28px;
  font-weight: 400;
  color: #333333;
  line-height: 33px;
}
</style>